<template>
  <div class="update">
    <van-nav-bar title="修改昵称" left-arrow @click-left="back" />
    <div class="name">
      <van-cell-group>
        <van-field v-model="value" placeholder="请输入用户名" />
      </van-cell-group>
      <div class="updated" v-tap="{methods:update}">确认修改</div>
    </div>
  </div>
</template>

<script>
import * as api from "../api/User";
import { Dialog } from "vant";

export default {
  name: "update",
  data(){
    return {
      value:'',
      info:{},
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    update(){
      api.updateUser({
        "uheader":this.info.uheader,
        "uname": this.value,
        "birthday": this.info.birthday,
        "usex": this.info.usex,
        "vip":"0",
      }).then((data)=>{
        console.log(data.data);
        if(data.data.code=="200"){
          Dialog.alert({
            message: "修改成功",
          });
          this.$router.go(-1);
        }else if(data.data.code == "400"){
          Dialog.alert({
            message: "用户名没有改变哦!",
          });
          this.$router.go(-1);
        }
      })
    }
  },
  watch:{ 
    value(newValue){
      if(newValue){
        document.getElementsByClassName("updated")[0].style.backgroundColor = "#000";
      }else{
        document.getElementsByClassName("updated")[0].style.backgroundColor = "#cecece";         
      }
    }
  },
   mounted(){
    api.getOneUser().then((data)=>{
        this.info = data.data.result[0];
        this.value = this.info.uname;
      })
  },
};
</script>

<style scoped>
.van-ellipsis {
  font-size: 30px;
}
.van-icon {
  color: #333;
}
.name{
  padding:20px;
}
.van-cell{
  background:#eee;
}
.updated{
  width: 100%;
  height: 80px;
  background: #cecece;
  color: #fff;
  margin-top:30px;
  text-align: center;
  line-height: 80px;
  font-size:30px;
  border-radius: 5px;
}
</style>